<template>
  <div id="app">
    <button @click="unbindSSE();getChartStr();initSSE();">建立连接</button>
    <button @click="unbindSSE()">退出连接</button>
    <div>
      {{chartStr}}
    </div>
    <div v-for="(item,index) in sseMessage" :key="index">
      {{item}}
    </div>
  </div>
</template>
<script>
  export default {
    name: 'App',
    data() {
      return {
        sseMessage: [],
        chartStr: '',
        eventSource: undefined,
      }
    },
    mounted() {
      this.getChartStr()
      this.initSSE()
    },
    beforeUnload() {
      this.unbindSSE();
    },
    methods: {

      /**
       * 初始化服务器发送事件（SSE）连接
       *
       * 此方法创建一个新的 EventSource 对象，连接到后端服务器的指定 URL，
       * 并添加一个 message 事件监听器，用于接收服务器发送的消息。
       */
      initSSE() {
        // 创建一个SSE对象，连接到后端接口
        this.eventSource = new EventSource("http://192.168.0.198:8089/subscribe/" + this.chartStr);
        // 监听message事件，接收后端发送的消息
        this.eventSource.onmessage = (event) => {
          this.sseMessage.push(event.data)
        };
        this.eventSource.onerror = function (event) {
          if (event.target.readyState === EventSource.CLOSED) {
            console.log('Connection closed');
          } else {
            console.error('Error occurred', event);
          }
        }
      },

      /**
       * 取消订阅 SSE 事件源并解绑图表
       *
       * 这个方法首先检查是否存在有效的 SSE 对象。如果存在，它将关闭这个 SSE 连接。
       */
      unbindSSE() {
        if (this.eventSource) {
          this.eventSource.close();
        }
        fetch('http://192.168.0.198:8089/unbind/' + this.chartStr, {
            method: 'GET',
          })
          .catch(error => {
            console.error('Error unsubscribing:', error);
          });
      },

      /**
       * 获取唯一的图表字符串
       *
       * 此方法用于获取一个随机生成的、唯一的图表字符串。
       * 
       */
      getChartStr() {
        let array = new Uint32Array(1);
        crypto.getRandomValues(array);
        let randomHex = array[0].toString(16);
        let paddedHex = randomHex.padStart(8, '0'); // 确保32位长度
        this.chartStr = paddedHex
      },
    },
  }
</script>
<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }
</style>